<template>
    <div class="adcEdit">
        <el-form ref="campaignPageRef" :model="form" :rules="rules" label-width="100px" label-position="left">
            <el-form-item label="广告位置：">活动页</el-form-item>
            <el-form-item label="活动名称：" prop="campaignPageName">
                <el-input style="width:60%;"  @focus="campaignPageNameLimit = true" @blur="campaignPageNameLimit = false"
                        :show-word-limit="campaignPageNameLimit" maxlength="30" v-model="form.campaignPageName" placeholder="请输入活动名称" />
            </el-form-item>
            <el-form-item label="活动状态：" prop="status">
                <el-switch v-model="form.status" active-value="1" inactive-value="0" inline-prompt active-text="启用"
                    inactive-text="不启用" />
            </el-form-item>
            <el-form-item label="活动内容：" prop="campaignPageStructure">
                <editor v-model="form.campaignPageStructure" :min-height="192" />
            </el-form-item>
        </el-form>
        <div class="footer-btn">
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">提 交</el-button>
                <el-button @click="cancel">返 回</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import editor from '@/components/Editor'
import { getCampaignPage, addCampaignPage, updateCampaignPage } from "@/api/decor/advertisement";
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const campaignPageNameLimit = ref(false)
const data = reactive({
    form: {},
    rules: {
        campaignPageName: [
            { required: true, message: "活动名称不能为空", trigger: "blur" }
        ],
        campaignPageStructure: [
            { required: true, message: "活动内容不能为空", trigger: "blur" }
        ],
    }
});
const { form, rules } = toRefs(data);
(() => {
    const campaignPageId = route.params.campaignPageId
    if (campaignPageId) {
        getCampaignPage(campaignPageId).then((res) => {
            form.value = res.data
            getImgId(form.value.campaignPageStructure)
        })
    }
})();
function getImgId(richtext) {
    const regex = /<img[^>]*id="([^"]*)"/g;
    const ids = [];
    let match;
    while ((match = regex.exec(richtext)) !== null) {
        ids.push(match[1]);
    }
    return ids
}
/** 提交按钮 */
function submitForm() {
    proxy.$refs["campaignPageRef"].validate(valid => {
        if (valid) {
            let content = form.value.campaignPageStructure.replace(/<img\s+id="[^"]*"\s*\/?>/g, '');
            form.value.imgs = getImgId(content).join(',')
            if (form.value.campaignPageId != null) {
                updateCampaignPage(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    router.go(-1)
                });
            } else {
                addCampaignPage(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    router.go(-1)
                });
            }
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
const cancel = () => {
    router.go(-1)
}
</script>
<style lang="scss" scoped></style>